<template>
  <div class="product">
    <div class="g-header-container">
      <product-header ref="productHeader"/>            <!--商品头部-->
    </div>
    <me-scroll
      :data="productContent"
      @scroll="scroll"
      @scrollEnd="scrollEnd">
      <product-banner :images="images"/>               <!--商品图片-->
      <product-desc :info="productContent"/>           <!--商品描述-->
      <product-rate :info="productContent"/>           <!--商品评价-->
      <merchant :info="productContent"></merchant>     <!--商家信息-->
    </me-scroll>
    <product-tabbar/>
  </div>
</template>
<script>
import productHeader from './product-header'
import productDesc from './product-desc'
import productBanner from './product-banner'
import meScroll from '@/base/me-scroll'
import merchant from './merchant'
import { getProductInfo } from '@/api/product'
import productRate from './product-rate'
import productTabbar from './tabbar'
export default {
  name: 'product',
  components: {
    productHeader,
    productDesc,
    productBanner,
    meScroll,
    productRate,
    merchant,
    productTabbar
  },
  data () {
    return {
      productContent: {},
      images: []
    }
  },
  created () {
    getProductInfo(this.$route.params.id).then(res => {
      this.productContent = res // 获取到的全部数据
      this.images = res.item.images // 商品图片（banner）
    })
  },
  methods: {
    scroll (swiper, translate) { // 拖拽过程中改变头部背景色
      this.$refs.productHeader.changeHeaderStatus(translate)
    },
    scrollEnd (swiper, translate) { // 滑动结束后改变头部背景色
      console.log('scrollEnd')
      this.$refs.productHeader.changeHeaderStatus(translate)
    }
  }
}
</script>
<style lang="stylus" scoped>
.product
  position absolute
  left 0
  top 0
  right 0
  bottom 0
  z-index 10000
  background-color #fff
  padding-bottom 50px
</style>
